<template>
  <div class="teacherIndex">
    <teaheaded />
    <div class="box">
      <div class="bbox">
        <div class="leftBox">
          <div class="navbar">
            <router-link to="/teacher">学生管理</router-link>
          </div>
          <div class="navbar">
            <router-link to="/teacher/course">课程管理</router-link>
          </div>
          <!-- <div class="navbar">
            <router-link to="/teacher/work">发布作业</router-link>
          </div> -->
        </div>
        <!-- <div class="rightBox">333</div> -->
      </div>
      <!-- <el-tabs :tab-position="tabPosition" style="height: 665px">
        <el-tab-pane label="学生管理" class="student">
          <button class="addStudent">添加学生</button>
          <button class="clear"></button>
          <div class="sbox">
            <div class="left">
              <a href="">所有学生</a>
              <a href="">网络1891</a>
              <button class="addClass">新建班级</button>
            </div>
            <div class="right">
              <el-table :data="tableData" border style="width: 95%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址"> </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="课程管理">课程管理</el-tab-pane>
        <el-tab-pane label="作业考试">作业考试</el-tab-pane>
      </el-tabs> -->
      <!-- <div class="head">
        <div class="msgBox">
          <div class="left">
            <div class="imgBox">
              <img src="@/assets/images/6.jpg" alt="" />
            </div>
          </div>
          <div class="right">
            <p>您好，<span>xxx</span></p>
            <p>工号：<span>xxx</span></p>
            <p>
              <a href="">修改个人资料</a>
            </p>
          </div>
        </div>
        <div class="clear"></div>
      </div> -->
      <!-- <div class="center">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="nav-box">
          <el-tab-pane label="学生管理" name="first" class="student">
            <button class="addStudent">添加学生</button>
          </el-tab-pane>
          <el-tab-pane label="课程管理" name="second">课程管理</el-tab-pane>
          <el-tab-pane label="作业考试" name="third">作业考试</el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="学生管理" name="first" class="student">
            <button class="addStudent">添加学生</button>
            <button class="clear"></button>
            <div class="sbox">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="已入班" name="first"
                  >用户管理</el-tab-pane
                >
                <el-tab-pane label="配置管理" name="second"
                  >配置管理</el-tab-pane
                >
                <el-tab-pane label="角色管理" name="third"
                  >角色管理</el-tab-pane
                >
                <el-tab-pane label="定时任务补偿" name="fourth"
                  >定时任务补偿</el-tab-pane
                >
              </el-tabs>
            </div>
          </el-tab-pane>
          <el-tab-pane label="课程管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="作业考试" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //   activeName: "first",
      tabPosition: "left",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="less">
.box {
  width: 100vw;
  height: 91vh;
  margin-top: 65px;
  padding-top: 20px;
  background-color: #f7f7f7;
  & .bbox {
    width: 80%;
    margin: 0 auto;
    // border: 1px solid red;
    & .leftBox {
      width: 150px;
      height: 83vh;
      border: 1px solid #e3e3e3;
      float: left;
      background-color: #fff;
      padding-top: 10px;
      .navbar {
        height: 60px;
        line-height: 60px;
        a {
          font-size: 1.4rem;
          font-weight: bold;
        }
      }
    }
    & .rightBox {
      margin-left: 180px;
      height: 83vh;
      border-radius: 20px;
      background-color: #fff;

    }
  }

  & .head {
    width: 1200px;
    height: 250px;
    border: 1px solid rgba(128, 128, 128, 0.185);
    margin: 0 auto;
    background-color: #fff;
  }
  & .msgBox {
    width: 28%;
    height: 250px;
    border-right: 1px solid rgba(128, 128, 128, 0.185);
    & .left {
      float: left;
      height: 250px;
      text-align: center;
      line-height: 350px;
      & .imgBox {
        width: 130px;
        height: 130px;
        & img {
          width: 100%;
          border-radius: 50%;
          margin-left: 30px;
        }
      }
    }
    .right {
      height: 250px;
      padding-top: 75px;
      margin-right: 50px;
      p {
        font-size: 1.3rem;
        margin-bottom: 10px;
        font-weight: bold;
        a {
          color: #409eff;
        }
      }
    }
  }

  & .el-tabs {
    width: 80%;
    margin: 0 auto;
    & .el-tabs__nav-scroll {
      width: 150px;
      background-color: #fff;
      & .el-tabs__item {
        height: 60px;
        line-height: 60px;
        font-size: 1.3rem;
        text-align: center;
      }
    }
    & .el-tabs__content {
      background-color: #fff;
      width: 85%;
      height: 97%;
      border-radius: 20px;
      border: 1px solid #e3e3e3;
      left: 15px;
      & .student {
        & .addStudent {
          float: left;
          width: 80px;
          height: 30px;
          background-color: #409eff;
          color: white;
          border-radius: 10px;
          border: #409eff;
          cursor: pointer;
          margin-left: 20px;
          margin-top: 20px;
        }
        & .sbox {
          margin-top: 45px;
          font-size: 1.2rem;
          border-top: 1px solid #e3e3e3;

          // & .left {
          //   position: fixed;
          //   float: left;
          //   width: 150px;
          //   height: 580px;
          //   padding-top: 10px;
          //   border-right: 1px solid #e3e3e3;
          //   & a {
          //     display: block;
          //     // border: 1px solid red;
          //     height: 40px;
          //     line-height: 40px;
          //     font-size: 1.2rem;
          //   }
          //   & .addClass {
          //     width: 80px;
          //     height: 30px;
          //     background-color: #fff;
          //     color: white;
          //     border-radius: 10px;
          //     cursor: pointer;
          //     color: #409eff;
          //     // border: #409eff;
          //     margin-top: 280px;
          //   }
          // }
          // & .right {
          //   margin-left: 150px;
          // }
        }
      }
    }
  }
}
</style>
